<template>
	<view class="content">
		<u-navbar back-text="返回" :title="type.name"></u-navbar>
		<view class="l-body">
			<view class="l-main">
				<u-empty margin-top="500" text="正在努力收录中>_<" mode="search" :show="noData"></u-empty>
				<view class="l-dl" v-for="(item,index) in listData" :key="index" @tap="details(item.id)">
					<u-lazy-load class="l-dt" :image="item.img" :threshold="-100"  :error-img="no_book"></u-lazy-load>
					<view class="l-dd">
						<view class="l-dd-title">
							{{item.name}}
						</view>
						<view class="l-dd-footer">
							{{item.author}}
						</view>
						<view class="l-dd-content">
							{{item.introduce}}
						</view>
					</view>
				</view>
				<u-loadmore class="loadmore" v-if="loadmore" :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:{},
				listData: [],
				noData: false,
				page: 1,
				status: 'loadmore',
				loadmore: false,
				no_book:_imgs.no_book
			}
		},
		methods: {
			search() {
				//https://m.biquge.com/fenlei7_1.html
				let that = this;
				that.zaiApi({
					url: '/com/fenlei' + that.type.index + "_" + that.page+'.html',
				}).then(function(res) {
					that._tool.searchData(res).then(function(list) {
						if (list.length == 0) { //当前查询条件没有数据 则没有更多数据
							that.status = 'nomore';
						} else { //反而则可能还有更多数据
							//总数据=之前的全部数据加上当前查询到的数据
							that.listData = that.listData.concat(list);
							that.loadmore = true;
							that.status = 'loadmore';
						}
						if (that.listData.length == 0) { //如果总的数据没有则显示没有数据
							that.noData = true;
						}
					});
				});
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/info/info?source=1&id=' + id
				})
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') {
				return;
			}
			this.status = 'loading';
			this.page = this.page + 1;
			this.search();
		},
		onLoad(option) {
			this.type = option;
			this.search();
		}

	}
</script>

<style>
	.loadmore {
		padding-bottom: 20rpx;
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
		padding-bottom: 20rpx;
	}

	.l-dt {
		/* background-image: url(/static/img/book_no_pic.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%; */
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

</style>
